<!--
 * @Author: your name
 * @Date: 2021-11-25 14:06:50
 * @LastEditTime: 2022-01-19 21:34:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \template\src\modules\WscManagement\index.vue
-->
<template>
  <div class="reimbursement-container">
    <fks-query-page
      v-loading="loading"
      :page-sizes="[20, 50, 100]"
      :layout="layout"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :data="tableData"
      border
      highlight-current-row
      :total="total"
      table-name="报销申请"
      @query="getData"
      @size-change="getData"
    >
      <template slot="search">
        <fks-search-item label="报销申请名称">
          <fks-input v-model="searchParams.name" />
        </fks-search-item>
        <fks-search-item label="报销部门">
          <fks-org-selector
            :dept-name.sync="searchParams.departmentName"
            :dept-id.sync="searchParams.departmentId"
          />
        </fks-search-item>
      </template>

      <div slot="button">
        <fks-button
          type="primary"
          icon="fks-icon-plus"
          @click="addHandler"
        >
          {{ LANG.ADD }}
        </fks-button>
      </div>
      <template>
        <fks-table-column
          type="index"
          align="center"
          width="50"
          label="#"
        />
        <fks-table-column
          prop="name"
          label="报销申请名称"
          header-align="center"
          align="left"
        />
        <fks-table-column
          prop="departmentName"
          label="报销部门"
          align="center"
        />
        <fks-table-column
          prop="managerFullname"
          label="负责人"
          align="center"
        />
        <fks-table-column
          prop="budget"
          label="采购预算"
          align="center"
        />
        <fks-table-column
          prop="expense"
          label="费用"
          align="center"
        />
        <fks-table-column
          prop="type"
          label="费用类型"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.type | transferEnum('reimbursement_type') }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="financeAssigneeFullname"
          label="财务审批人"
          align="center"
        />
        <fks-table-column
          prop="manageAssigneeFullname"
          label="经理审批人"
          align="center"
        />
        <fks-table-column
          prop="description"
          label="报销说明"
          align="center"
        />
        <fks-table-column label="操作">
          <template slot-scope="scope">
            <fks-button
              type="text"
              size="mini"
              @click="viewHandler(scope.row.id)"
            >
              查看
            </fks-button>
            <fks-button
              type="text"
              size="mini"
              @click="editHandler(scope.row.id)"
            >
              编辑
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <router-view />
  </div>
</template>
<script>
import Mix from '@/mixins/module'
import { getReimbursement } from './api'
export default {
  name: 'Reimbursement',
  mixins: [Mix],
  data() {
    return {
      loading: false,
      tableData: [],
      layout: 'total, sizes, prev, pager, next, jumper',
      pageSize: 20,
      currentPage: 1,
      total: 0,
      searchParams: {
        name: '',
        departmentName: '',
        // departmentId: ''
        managerFullname: ''
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    //获取数据,方法名不能修改
    getData() {
      this.loading = true
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        ...this.searchParams
      }

      getReimbursement(params)
        .then((res) => {
          this.tableData = res.data.list
          this.total = res.data.total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.tableData = []
        })
    },
    // 添加/树结构添加按钮事件
    addHandler() {
      this.$router.history.push('/reimbursement/form/add/ReimbursementPlan')
    },
    //列表中修改按钮事件
    editHandler(id) {
      this.$router.push('/reimbursement/form/edit/ReimbursementPlan/' + id)
    },
    viewHandler(id) {
      this.$router.push('/reimbursement/form/view/ReimbursementPlan/' + id)
    }
  }
}
</script>
<style lang="scss" scoped>
.reimbursement-container {
  width: 100%;
  height: 100%;
}
</style>
